/**
 * 优化表单绑定的处理函数  ----多个组件用同一个
 */
import React from 'react';
import ReactDOM from 'react-dom/client';

class Mytxt2 extends React.Component{
    state={
        stname:'temo',
        city:'吉安市',
        area:'江西省',
        flag:true
    }

    //统一处理
    formhadle=(e)=>{
        let t=e.target;//获取目标对象
        let val=t.type == 'checkbox'?t.checked:t.value//如果市复选框则是checked,其他的是value
        this.setState({
            [t.name]:val
        })
        console.log(this.state.area);
    }
   
    render(){
        return(
            <div>
                <h1>表单测试</h1>
                <p>输入框:<input name="stname" onChange={this.formhadle} type='text' value={this.state.stname} /></p>
                <p>文本域:<textarea name="area" onChange={this.formhadle} value={this.state.area}></textarea></p>
                <p>
                下拉列表-城市选择:
                    <select name="city" onChange={this.formhadle} value={this.state.city}>
                        <option value="南昌市">南昌市</option>
                        <option value="宜春市">宜春市</option>
                        <option value="吉安市">吉安市</option>
                    </select>
                </p>
                <p>
                    复选框:<input name="flag" type="checkbox" checked={this.state.flag} onChange={this.formhadle} />是否点赞
                </p>
            </div>
        )
    }
}

export default Mytxt2